<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 
        语法：
            选择器:nth-child(3){ 第几个子元素，如果不是就不执行了
                要修改的代码
            }
            (3)里可以是数字 2n或者even(偶数) 2n+1 2n-1 odd 奇数 3n 4n......

            选择器:nth-of-type(3){ 同类的第几个子元素，继续往下找
                要修改的代码
            }
            (3)里可以是数字 2n或者even(偶数) 2n+1 2n-1 odd 奇数 3n 4n......
     -->
    <style>
        /* .box li:first-child{
            color: red;
            font-size:30px;
        } */
        /* ul li:nth-child(odd){
            color: yellow;
            background: red;
        } */
        /* ul li:last-child{
            color:red;
            font-size:30px;
        } */
        
        /* 第三个li的第二个子元素p标签*/
        /* ul li:nth-child(3) p:nth-child(2){
            color:red;
            font-size: 20px;
        }
        ul li:nth-last-child(2){
            color:blue;
        }
        ul li p:only-child{
            color: green;
        } */
        ul li:first-of-type{
            color: red;
            font-size:30px;
        }
        ul li:last-of-type{
            color: red;
            font-size:30px;
        }
        ul li:nth-of-type(odd){
            color: blue;
            font-size:30px;
        }
        /* ul li:nth-last-of-type(){

        } */
        /* 
        first-of-type{}
        first-child{}
         */
    </style>
</head>
<body>
    <ul class="box">
        <li>张三</li>
        <li>李四</li>
        <li>王五
            <!-- <p>是帅哥</p>
            <p>隔老五</p>
            <p>是个单身狗</p> -->
        </li>
        <li>赵六
            <!-- <p>是帅哥</p>
            <p>隔老六</p>
            <p>是个单身狗</p> -->
        </li>
        <li>李白
            <!-- <p>是帅哥</p> -->
            
        </li>
        <li>赵云</li>
        <li>诸葛亮</li>
        <li>关羽</li>
        <li>老王</li>
        <li>老六</li>
    </ul>
    
</body>
</html>